import '@renderer/databases'

import store, { persistor } from '@renderer/store'
import { Provider } from 'react-redux'
import { HashRouter, Route, Routes } from 'react-router-dom'
import { PersistGate } from 'redux-persist/integration/react'

import Sidebar from './components/app/Sidebar'
import TopViewContainer from './components/TopView'
import AntdProvider from './context/AntdProvider'
import StyleSheetManager from './context/StyleSheetManager'
import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
import { ThemeProvider } from './context/ThemeProvider'
import NavigationHandler from './handler/NavigationHandler'
import AgentsPage from './pages/agents/AgentsPage'
import AppsPage from './pages/apps/AppsPage'
import FilesPage from './pages/files/FilesPage'
import HomePage from './pages/home/HomePage'
import KnowledgePage from './pages/knowledge/KnowledgePage'
import PaintingsPage from './pages/paintings/PaintingsPage'
import SettingsPage from './pages/settings/SettingsPage'
import TranslatePage from './pages/translate/TranslatePage'

function App(): React.ReactElement {
  return (
    // Provider: 来自 react-redux，用于将 Redux store 提供给应用中的所有组件
    <Provider store={store}>
      {/* StyleSheetManager: 可能用于管理样式，例如 CSS-in-JS 解决方案 */}
      <StyleSheetManager>
        {/* ThemeProvider: 用于提供主题（例如颜色、字体等）给应用中的组件 */}
        <ThemeProvider>
          {/* AntdProvider: 可能是 Ant Design UI 库的 Provider，用于配置 Ant Design 组件的全局行为 */}
          <AntdProvider>
            {/* SyntaxHighlighterProvider: 用于提供代码高亮功能或配置 */}
            <SyntaxHighlighterProvider>
              {/* PersistGate: 来自 redux-persist，用于在 Redux store 数据恢复之前延迟渲染 UI */}
              <PersistGate loading={null} persistor={persistor}>
                {/* TopViewContainer: 自定义组件，可能作为应用顶层视图的容器 */}
                <TopViewContainer>
                  {/* HashRouter: 来自 react-router-dom，用于实现基于 hash 的路由，
                  是路由相关组件 (Routes, Link...) 的基础，*/}
                  <HashRouter>
                    {/* NavigationHandler: 自定义组件，可能用于处理导航逻辑 */}
                    <NavigationHandler />
                    {/* Sidebar: 自定义组件，应用的侧边栏 */}
                    <Sidebar />
                    {/* Routes: 来自 react-router-dom，用于定义应用的路由规则 */}
                    <Routes>
                      {/* Route: 定义具体的路由路径和对应的组件 */}
                      <Route path="/" element={<HomePage />} />
                      <Route path="/agents" element={<AgentsPage />} />
                      <Route path="/paintings" element={<PaintingsPage />} />
                      <Route path="/translate" element={<TranslatePage />} />
                      <Route path="/files" element={<FilesPage />} />
                      <Route path="/knowledge" element={<KnowledgePage />} />
                      <Route path="/apps" element={<AppsPage />} />
                      <Route path="/settings/*" element={<SettingsPage />} />
                    </Routes>
                  </HashRouter>
                </TopViewContainer>
              </PersistGate>
            </SyntaxHighlighterProvider>
          </AntdProvider>
        </ThemeProvider>
      </StyleSheetManager>
    </Provider>
  )
}

export default App
